<#include "include/macros.ftl">
<@compress single_line=false>
<@header title="${config.siteName!} | 生活日志"
    keywords="${config.homeKeywords!}"
    description="${config.homeDesc!}"
    canonical="/${url!}">
</@header>
<style>
    .xyl_indicators{
        position: absolute;
        bottom: 0px;
        right: 0%;
        z-index: 15;
        width: 100%;
        height: 60px;
        padding-left: 0;
        text-align: right;
        background: -webkit-gradient(linear,left top,left bottom,from(rgba(0,0,0,0)),to(rgba(0,0,0,.75)));
    }
    .xyl_li{
        display: inline-block;
    }
    .xyl_img{
        height: 50px;
        width: 150px;
        margin-right: 6px;
        cursor:pointer;
        border-radius: 4px!important;
        border: 2px solid #fff;
    }

    .xyl_img:hover{
        border-radius: 4px!important;
        border: 2px solid #46c0e6;
    }
    .xyl_img_hover{
        border-radius: 4px!important;
        border: 2px solid #46c0e6;
    }
    .xyl_div_radius_10{
        border-radius: 10px!important;
        overflow: hidden;
    }
    .xyl_div_radius_5{
        border-radius: 0px 0px 5px 0px!important;
        overflow: hidden;
    }


</style>
<script type="text/javascript" src="https://aliyunce.oss-cn-hangzhou.aliyuncs.com/oneblog/js/jquery%401.11.1/dist/jquery.min_2.js"></script>
<script>
    $(function () {
        $("#myCarousel").on('slide.bs.carousel', function (obj) {
            // 当前轮播索引
            var index = $(this).find('.item').index(obj.relatedTarget);
            $("#xylIndicators"+index).addClass("xyl_img_hover")
            let vue =  $(this).find('.item');
            for(let i =0;i<vue.length;i++){
                if(i!==index){
                    $("#xylIndicators"+i).removeClass("xyl_img_hover")
                }
            }
        });
    })

</script>
<div class="container custome-container">
    <@prompt></@prompt>
    <nav class="breadcrumb">
        <div class="notify"><i class="fa fa-bullhorn fa-fw"></i></div>
        <div id="scrolldiv">
            <div class="scrolltext">
                <ul class="list-unstyled" id="notice-box">
                    <li class="scrolltext-title">
                        <a href="javascript:void(0)" rel="bookmark">活了二十多年，没能为祖国、为人民做点什么，每思及此，伤心欲绝。</a>
                    </li>
                    <li class="scrolltext-title">
                        <a href="javascript:void(0)" rel="bookmark">其实我们可以将所有的问题归结为两种：一种是没饭吃饿出来的；一种是吃饱了撑出来的。</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div class="row">
        <div class="col-sm-8 blog-main">
            <@articleTag method="recommendedList" pageSize="8">
                <#if recommendedList?? && (recommendedList?size > 0)>
                <div class="blog-body expansion xyl_div_radius_10" style="padding: 0;">
                    <div id="myCarousel" class="carousel slide xyl_div_radius_10" style="height:300px;">
                        <ol class="xyl_indicators">
                            <#list recommendedList as item>
                                <li data-target="#myCarousel" data-slide-to="${item_index}" class="${(item_index == 0)?string('active','')} xyl_li">
                                    <div>
                                        <img src="${item.coverImage}"  id="xylIndicators${item_index}"  alt="" class="${(item_index == 0)?string('xyl_img_hover','')} xyl_img">
                                    </div>
                                </li>
                            </#list>
                        </ol>
                        <div class="carousel-inner">
                            <#list recommendedList as item>
                            <div class="item ${(item_index == 0)?string('active','')}">
                                <a href="${config.siteUrl}/article/${item.id?c}">
                                    <img src="${item.coverImage}" onerror="this.src='${config.staticWebSite}/img/defaultbanner.png'" alt="${item.title}" title="${item.title}">
                                </a>
                                <div class="zyd-carousel-caption xyl_div_radius_5">${item.title}</div>
                            </div>
                            </#list>
                        </div>
                        <a class="left carousel-control hide" href="#myCarousel" role="button" data-slide="prev">
                            <span class="fa fa-angle-left fa-fw fa-3x" aria-hidden="true"></span>
                            <span class="sr-only">Previous</span>
                        </a>
                        <a class="right carousel-control hide" href="#myCarousel" role="button" data-slide="next">
                            <span class="fa fa-angle-right fa-fw fa-3x" aria-hidden="true"></span>
                            <span class="sr-only">Next</span>
                        </a>
                    </div>
                </div>
                </#if>
            </@articleTag>
            <#if page.list?? && (page.list?size > 0)>
                <#list page.list as item>
                    <article class="fade-in">
                        <#if item.coverImage?? && (item.coverImage?length > 7)>
                            <figure class="thumbnail">
                                <a href="${config.siteUrl}/article/${item.id?c}">
                                    <img width="150" height="150" <#if config.lazyloadPath!>data-original<#else>src</#if>="${item.coverImage}" onerror="this.src='${config.staticWebSite}/img/default.png'" class="img-responsive lazy-img" alt="${item.title!}">
                                </a>
                            </figure>
                        </#if>
                        <header class="entry-header">
                            <#if item.private>
                            <span class="art-type art-type-yellow"><i class="fa fa-lock fa-fw"></i>私密</span>
                            </#if>
                            <span class="art-type"><a href="${config.siteUrl}/type/${item.typeId?c}">${item.type.name}</a></span>
                            <h2 class="entry-title">
                                <a href="${config.siteUrl}/article/${item.id?c}" rel="bookmark" title="${item.title}" data-toggle="tooltip" data-placement="bottom">${item.title}</a>
                            </h2>
                        </header>
                        <div class="entry-content">
                            <div class="archive-content">
                                ${item.description!}
                            </div>
                            <span class="entry-meta">
                                <span class="date" title="文章发表日期" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-clock-o fa-fw"></i>${item.createTime?string('yyyy-MM-dd')}</span>
                                <span class="views" title="文章阅读次数" data-toggle="tooltip" data-placement="bottom"><i class="fa fa-eye fa-fw"></i>浏览(${item.lookCount!(0)})</span>
                                <span class="comment" title="文章评论次数" data-toggle="tooltip" data-placement="bottom">
                                    <a href="${config.siteUrl}/article/${item.id?c}#comment-box" rel="external nofollow">
                                        <i class="fa fa-comments-o fa-fw"></i>评论(${item.commentCount!(0)})
                                    </a>
                                </span>
                            </span>
                            <div class="clear"></div>
                            <span class="entry-more">
                                <a href="${config.siteUrl}/article/${item.id?c}" rel="bookmark" title="点击查看文章详情" data-toggle="tooltip" data-placement="bottom">阅读全文</a>
                            </span>
                        </div>
                    </article>
                </#list>
                <@pageBar></@pageBar>
            <#else >
                <article class="fade-in" style="height: auto">
                    <div class="rows">
                        <div class="col-md-10 col-sm-12">
                            <div class="h3 text-center">亲，啥也没找到啊~~<img src="http://img.t.sinajs.cn/t35/style/images/common/face/ext/normal/15/j_thumb.gif" alt="[囧]"></div>
                            <div class="h5 text-center">换个姿势，再来一次~~</div>
                        </div>
                        <div class="col-md-2 col-sm-12">
                            <img src="${config.staticWebSite}/img/wrong.gif" class="center-block" alt="惩罚我" style="width: 110px;margin-top: -10px;">
                        </div>
                    </div>
                    <form action="/" method="post" class="form-horizontal searchForm">
                        <input type="hidden" name="pageNumber" value="1">
                        <div class="input-group">
                            <input type="text" class="form-control br-none" name="keywords" placeholder="换个姿势，再来一次~~">
                            <span class="input-group-btn">
                                <button class="btn btn-default br-none nav-search-btn pointer" type="submit"><i class="fa fa-search"></i> 搜索</button>
                            </span>
                        </div>
                        <div class="clear" style="margin-bottom: 10px"></div>
                        <ul class="list-unstyled list-inline search-hot">
                            <li><strong style="position: relative;top: 2px;color: #999999;">热门搜索：</strong></li>
                            <@zhydTag method="searchOptions">
                                <#if searchOptions?? && (searchOptions?size > 0)>
                                    <#list searchOptions as item>
                                        <li><a class="pointer" rel="external nofollow"><span class="label label-info">${item}</span></a></li>
                                    </#list>
                                </#if>
                            </@zhydTag>
                        </ul>
                    </form>
                </article>
            </#if>
        </div>
        <#include "layout/sidebar.ftl"/>
    </div>
</div>
    <div id="landlord" style="left:5px;bottom:0px;">
        <div class="message" style="opacity:0"></div>
        <canvas id="live2d" width="500" height="560" class="live2d"></canvas>
        <div class="live_talk_input_body">
            <div class="live_talk_input_name_body">
                <input name="name" type="text" class="live_talk_name white_input" id="AIuserName" autocomplete="off" placeholder="你的名字" />
            </div>
            <div class="live_talk_input_text_body">
                <input name="talk" type="text" class="live_talk_talk white_input" id="AIuserText" autocomplete="off" placeholder="要和我聊什么呀？"/>
                <button type="button" class="live_talk_send_btn" id="talk_send">发送</button>
            </div>
        </div>
        <input name="live_talk" id="live_talk" value="1" type="hidden" />
        <div class="live_ico_box">
            <div class="live_ico_item type_info" id="showInfoBtn"></div>
            <div class="live_ico_item type_talk" id="showTalkBtn"></div>
            <div class="live_ico_item type_music" id="musicButton"></div>
            <div class="live_ico_item type_youdu" id="youduButton"></div>
            <div class="live_ico_item type_quit" id="hideButton"></div>
            <input name="live_statu_val" id="live_statu_val" value="0" type="hidden" />
            <audio src="" style="display:none;" id="live2d_bgm" data-bgm="0" preload="none"></audio>
            <input name="live2dBGM" value="音乐地址" type="hidden">
            <input id="duType" value="douqilai,l2d_caihong" type="hidden">
        </div>
    </div>
    <div id="open_live2d">召唤伊斯特瓦尔</div>
    <script type="text/javascript" src="https://aliyunce.oss-cn-hangzhou.aliyuncs.com/oneblog/js/jquery.min.js"></script>
    <script>
        var message_Path = '/live2d/';//资源目录，如果目录不对请更改
        var talkAPI = "";//如果有类似图灵机器人的聊天接口请填写接口路径
    </script>
    <script type="text/javascript" src="https://aliyunce.oss-cn-hangzhou.aliyuncs.com/live2d/js/live2d.js"></script>
    <script type="text/javascript" src="https://aliyunce.oss-cn-hangzhou.aliyuncs.com/live2d/js/message.js"></script>
<@footer></@footer>
</@compress>